#{extends 'main.html' /} #{set title:'topicView.html' /}
<head>

<style type="text/css">
#menu

ul

</
body
>
{
margin

:

0;
padding

:

0;
list-style-type

:


none

;
text-align


:

center

;
}
#menu ul li {
	display: inline;
}

#menu ul li a {
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: #036;
}

#menu ul li a:hover {
	color: #fff;
	background-color: #369;
}
</style>

</head>

<!-- Displaying of the name of the Topic.
@author Rana Amr -->
<body>
	<br>
	<br>
	<h1 style="text-align: center; color: red; font-size: 40px;">${currentTopic.topicName}</h1>
	<br>
	<br>

<div id="menu">
	<!-- Link to create new tutorial.
@author Rana Amr
@param topicId -->
	#{if session.get("RegisteredUserId") == null}
	<a style="display: none;" href="@{Topics.followTop(currentTopic.id)}">Follow
		This Topic</a>
	<br>
	<a style="display: none;"
		href="/Tutorials/createTutorial?topicId=${currentTopic.id}">Create
		a New Tutorial</a> #{/if} #{else}

	<!-- Marwa Elshenawy
This is a button that enables the user to follow a topic
@author Marwa Elshenawy -->
<ul>
	<li><a href="@{Topics.followTop(currentTopic.id)}">Follow This Topic</a></li>
	<br><br>
	<li><a href="/Tutorials/createTutorial?topicId=${currentTopic.id}">Create
		a New Tutorial</a></li> </ul>
		
	<br>
	<li><a href="/Tutorials/tempcreatetut?topicId=${currentTopic.id}">Create
		a New Tutorial temp</a></li> </ul>
		#{/else}
	<br>
</div>
	<!-- Displaying the tutorials of this topic.
@author Rana Amr -->

	#{ifnot tutorials}
	<p style="text-align: left; font-size: 20px; color: red;">There are
		no tutorials yet..</p>
	#{/ifnot} #{else}

	<div style="text-align: left; font-size: 20px;">
		<p style="font-size: 20px; color: red;">List of Tutorials:</p>
		#{list items:tutorials, as:'Tut'}
		<ul>
			<li><a href="@{Tutorials.tutorialPage(Tut.id)}">${Tut.title.raw()}</a></li>
		</ul>
		#{/list} #{/else} <br> <br>
	</div>

	<div style="text-align: left; font-size: 20px;">
		<!-- Displaying the sub topics of this topic.
@author Rana Amr -->
		#{ifnot currentSub}
		<p style="text-align: left; font-size: 20px; color: red;">The
			topic does not have Sub Topics yet..</p>
		#{/ifnot} #{else}
		<p>List of Sub Topics:</p>
		#{list items:currentSub, as:'s'}
		<ul>
			<li><a href="@{Topics.topicView(s.id)}">${s.topicName}</a></li>
		</ul>
		#{/list} #{/else} <br> <br>
#{if session.get("RegisteredUserId") == null}
		<!-- This form displays the available topics for the user to choose from them a sub topic.
@author Rana Amr 
@param topicId, subTopicId, -->
		#{ifnot newSubs}
		<p style="text-align: left; font-size: 20px; color: red;">There
			are no topics to choose from to set as Sub Topic..</p>
		#{/ifnot} #{else}
		<form action="@{Topics.addSubTopic()}" method="POST">
			<input name="topicId" style="display: none;" value=${currentTopic.id}></input>
			<select name="subTopicId"> #{list items:newSubs, as:'Topz'}
				<option value="${Topz.id}">${Topz.topicName}</option> #{/list}
			</select> <input type="submit" value="Make this a Subtopic" />
		</form>
		#{/else} <br> <br>

		<!-- This form displays the available topics for the user to choose from them a parent 
topic.
@author Rana Amr 
@param topicId, parentTopicId, -->
		#{ifnot parent}
		<p style="text-align: left; font-size: 20px; color: red;">There
			are no topics to choose from to set your topic as its Sub Topic..</p>
		#{/ifnot} #{else}
		<form action="@{Topics.addParentTopic()}" method="POST">
			<input name="topicId" style="display: none;" value=${currentTopic.id}></input>
			<select name="parentTopicId"> #{list items:parent, as:'Top'}
				<option value="${Top.id}">${Top.topicName}</option> #{/list}
			</select> <input type="submit"
				value="Make my topic a sub topic for this Topic" />
		</form>
		#{/else}
	</div>
<!-- This is for viewing the existing topics in a drop-down list to choose the topic 
the user needs to merge
@author Nourhan Elmalahy -->

	#{ifnot mergedTopics}
	<p style="text-align: left; font-size: 20px; color: red;">There are
		no topics to choose from to set as a merged Topic..</p>
	#{/ifnot} #{else}
	
	<form action="@{Topics.addMergedTopic()}" method="POST">
		<input name="topicId" style="display: none;" value=${currentTopic.id}></input>
		<select name="mergedTopicId"> #{list items:allTopics,
			as:'Topic'}
			<option value="${Topic.id}">${Topic.topicName}</option> #{/list}
		</select> <input type="submit" value="Merge" />
	</form>
	#{/else}
	<!-- End Nourhan Elmalahy -->
	<br>
	<br>
#{/if}
</body>